<template>
  <div>
    <ul>
        <li v-for="(v,index) in list" :key="index" @click="chilithis(index)">
            <img :src="v.pic" alt="">
            <p v-html="v.title"></p>
        </li>
    </ul>
  </div>
</template>

<script>
import service from '@/utils/service';
export default {
    data(){
        return {
            list:[]
        }
    },
    methods:{
      chilithis(index){
        if(index == 4){
          this.$router.push('/watch')
        }
      }
    },
    mounted(){
    service({
      url:"http://localhost:3000/navlist",
      method:"get",
    }).then((res)=>{
      res.data.forEach(element => {
        this.list.push(element) 
      });
    })
  }
}
</script>

<style scoped>
ul {
    height: 176px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: #fafafa;
    font-size: 12px;
}
li {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
li img {
    width: 50px;
    height: 50px;
}
</style>